<template>
	<view class="task">
		<view class="navigationBar">
			<view class="top">
				<image src="/static/imgs/headbg.png" mode="scaleToFill" class="headbg"></image>
			</view>
			<view class="flex">
				<view @click="gotoPage(1)">
					<image src="/static/imgs/icon1.png" mode="" class="ii"></image>
					<view>任务管理</view>
				</view>
				<!-- <view @click="gotoPage(2)">
					<image src="/static/imgs/icon2.png" mode="" class="ii"></image>
					<view>专项巡查</view>
				</view> -->
				<view @click="gotoPage(3)" v-if="userInfo.roleCode !== 'mj'">
					<view class="icobn3">
						<image src="/static/imgs/icon3.png" mode="" class="ii"></image>
					</view>
					<view>重点区域<br>巡查反馈</view>
				</view>
			</view>
		</view>
		
		<view class="searchFor">
			<input v-model="imputData" class="searchInput" type="text" placeholder="搜索任务" />
			<span @click="searchConten">搜索</span>
		</view>
		<view class="table">
			<view :class="activeTab == '' ? 'tableList tableListColor' : 'tableList'" @click="obtainConten('')">全部({{sum}})</view>
			<view :class="activeTab == '1' ? 'tableList tableListColor' : 'tableList'" @click="obtainConten('1')">未完成({{ywc}})</view>
			<view :class="activeTab == '2' ? 'tableList tableListColor' : 'tableList'" @click="obtainConten('2')">已完成({{djs}})</view>
			<view v-if ="userInfo.roleCode != 'wgy'" :class="activeTab == '0' ? 'tableList tableListColor' : 'tableList'" @click="obtainConten('0')">待接收({{wwc}})</view>
		</view>
		<scroll-view @scrolltolower="loadMoreData" scroll-y  class="content">
			<view class="contentList" v-for="item in dataList" :key="item.id" @click="toDetails(item.id)">
				<view class="contentListTop">
					<view class="contentListtitle">
					{{item.eventName}}
					</view>
					<view class="contentListstate">
						<span style="background: #d9001b;" v-if="item.eventStatus == '0'">待接收</span>
						<span style="background: #fe7a21;" v-else-if="item.eventStatus == '1'">待完成</span>
						<span style="background: #137a29;" v-else-if="item.eventStatus == '2'">已完成</span>
						<span style="background: #5425a2;" v-else-if="item.eventStatus == '3'">已驳回</span>
						<span style="background: #5425a2;" v-else>其他</span>
					</view>
				</view>
				<view class="contentListTime">
					事发时间：{{item.eventTime}}
				</view>
			</view>
			<view class="contentNull" v-if="dataList.length == 0" >暂无数据</view>
			<view class="contentOut" v-if="dataList.length != 0 && contentOut">已经到底了</view>
			<view style="height: 4rem;"></view>
		</scroll-view>
		<tui-tabbar :tabBar="tabBar" :current="current" @click="tabbarSwitch" color="#9B9B9B" selectedColor="#3291F8" iconSize="48">	
		</tui-tabbar>
	</view>
</template>

<script>
	import {mapState, mapGetters, mapMutations} from 'vuex'
	export default {
		components: {
		},
		data() {
			return {
				current: 1,
				activeTab:'',
				size:'10',
				imputData:'',
				currentt:1,
				pages:'',
				contentOut:false,
				dataList:[],
				sum:'0',
				wwc:'0',
				ywc:'0',
				djs:'0'
			};
		},
		computed: {
			...mapGetters(['tabBar', "hasLogin"]),
			...mapState(["userInfo"]),
		},
		onLoad() {},
		onUnload() {},
		onShow() {
			this.getDataList()
			this.activeTab = ''
		},
		
		methods: {
			gotoPage(i) {
				if (i == 1) {
					uni.navigateTo({ url: '/pages/threeTerminal/taskManagement' });
					// this.$Router.navigateTo('pages/userViews/taskList');
				} else if (i == 2) {
					uni.navigateTo({ url: '/pages/userViews/taskList?type=zx' });
				} else if (i == 3) {
					uni.navigateTo({ url: '/pages/userViews/taskList?type=xs' });
				}
			},
			getDataList(status){
				let data = {
					size:this.size,
					current: this.currentt,
					status:status
				}
				if(this.userInfo.roleCode != 'mj'){
					data.adminId = this.userInfo.id
				}else{
					data.createId = this.userInfo.id
				}
				this.$apis.getIndexLIst(data).then(res =>{
					if(res.code == '20000'){
						if(this.currentt == 1){	
							this.dataList = res.data.page.records
							this.pages = res.data.page.pages
							this.sum = res.data.sum
							this.wwc = res.data.received == undefined ? 0 : res.data.received
							this.ywc = res.data.uncompleted == undefined ? 0 : res.data.uncompleted
							this.djs = res.data.completed == undefined ? 0 : res.data.completed
						}else{
							res.data.page.records.map(item =>{
								this.dataList.push(item)
							})
						}
						
					}
				})
			},
			tolastPage(){
				wx.navigateBack({
				  delta: 1 
				})
			},
			searchConten(){
				this.$apis.getIndexLIst({createId: this.userInfo.id, size:this.size, current: this.currentt,name:this.imputData}).then(res =>{
					if(res.code == '20000'){
						this.dataList = res.data.page.records
					}
				})
			},
			obtainConten(text){
				this.activeTab = text
				this.currentt = 1
				this.getDataList(text)
			},
			// 任务详情
			toDetails(id){
				wx.navigateTo({
				  url: '/pages/threeTerminal/details?id=' + id
				})
			},
			tabbarSwitch(e) {
				if (e.index == this.current) return
				if (e.index == 0) {
					uni.switchTab({
						url: '/pages/threeTerminal/index'
					})
				} else if (e.index == 2) {
					uni.switchTab({
						url: '/pages/user/user'
					})
				}
			},
			// 触底滚动
			loadMoreData(){
				this.currentt++
				if(this.pages >= this.currentt){
					this.getDataList(this.activeTab)
				}else{
					this.dataList.length != 0 && (this.contentOut = true)
				}
			}
		}
	}
</script>

<style lang="scss">
.top {
    position: relative;
	width: 100%;
}
.headbg {
	width: 100%;
	height: 400rpx !important;
}
.contentNull{text-align: center; margin-top: 40%; color: #333333; font-size: 32rpx;}
.flex {
    position: absolute;
    top: 55%;
    margin: auto;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    background: #fff;
    width: 90%;
    border-radius: 20rpx;
    padding: 40rpx 20rpx;
	box-shadow: 1px 1px 4px #eee;
	.ii {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 10rpx;
	}
	.icobn3 {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 10rpx;
		border-radius: 30rpx;
		background: #66dd5d;
		position: relative;
		image {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			width: 60rpx;
			height: 60rpx;
			margin: auto;
		}
	}
}
	.task{height: 100vh;}
	.navigationBar{position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 400rpx; background-size: 100% 100%;
		.navIcon{position: absolute; left: 0;}
		.navText{font-size: 45rpx;}
	}
	.searchFor{padding: 0 50rpx; margin: 100rpx 0 20rpx; display: flex; align-items: center; justify-content: space-between;
		.searchInput{border: 1rpx solid #aaaaaa; border-radius: 50rpx; height:65rpx; width: calc(100% - 120rpx); padding-left: 20rpx;}
		span{font-size: 34rpx;}
	}
	.table{display: flex; align-items: center; padding: 15rpx 40rpx;
		.tableListColor{color: #0000FF;}
		.tableList{width: 25%; font-size: 30rpx; text-align: center;}
	}
	.content{ padding: 0 20rpx; height: calc(100% - 400rpx - 250rpx); overflow-y: auto;
		.contentList{ margin-top: 30rpx; padding: 30rpx 30rpx; border:1rpx solid rgba(149, 156, 166, 0.2); border-radius: 10rpx;
			.contentListTop{display: flex; align-items: center; margin-bottom: 20rpx;
				.contentListtitle{
					width: calc(100% - 120rpx);
					font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
					font-weight: 650;
					font-size: 40rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.contentListstate{width: 120rpx;
					span{padding: 5rpx 15rpx; color: #ffffff; border-radius: 10rpx;}
				}
			}
			.contentListTime{
				font-size: 28rpx;
				color: #959CA6;
			}
		}
		.contentOut{margin: 50rpx 0 130rpx 0; text-align: center; color: #333333; font-size: 32rpx;}
	}
</style>